<template>
	<view>
		<u-navbar :border-bottom="false" :title="'职位编辑'" :title-size="36" :title-bold="true" :title-color="textColor"
			:background="{backgroundColor: bgColor}">
		</u-navbar>
		<view class="header u-m-b-20">
			<u-form :model="form" ref="registerMdForm">
				<u-form-item label-position="top" label="职位名称" :label-style="labelStyle" :border-bottom="false"
					prop="name">
					<image src="/static/bianji.png"
						style="width: 30rpx;height:30rpx;margin-right: 20rpx;margin-top: 20rpx;" mode=""></image>
					<u-input v-model="form.name" style="margin-top: 20rpx;" :custom-style="{fontSize: '32rpx'}"
						placeholder-style="font-size: 28rpx" :clearable="false" placeholder="请输入职位名称" />
				</u-form-item>
			</u-form>
		</view>
		<!-- <view>
			<u-cell-group :border="false">
				<u-cell-item v-for="(item,index) in menus" :title="item.name" :arrow="false" :key="index">
					<u-switch slot="right-icon" v-model="item.isCheck" :size="40" :active-color="themeColor"
						:inactive-color="greyColor"></u-switch>
				</u-cell-item>
			</u-cell-group>
		</view> -->
		<view>
			<!-- 采购商权限菜单 -->
			<u-cell-group :border="false" v-if="buyerMenus.length!=0">
				<u-cell-item  :title="'采购商权限'" :title-style="{'font-weight':'bold'}" :border-bottom="false" :arrow="false" >
				</u-cell-item>
				<u-cell-item v-for="(item,index) in buyerMenus"  :arrow="false" :key="item.code+index">
					<view class="" slot="title">
						<view class="" style="font-weight: 400;color: #333;">{{item.name}}</view>
						<view class="u-font-24" style="color: #999;">{{item.remarks}}</view>
					</view>
					<u-switch slot="right-icon" v-model="item.isCheck" :size="40" :active-color="themeColor"
						:inactive-color="greyColor"></u-switch>
				</u-cell-item>
				
			</u-cell-group>
			<!-- 销售商权限菜单 -->
			<u-cell-group :border="false" v-if="sellerMenus.length!=0">
				<u-cell-item  :title="'销售商权限'" :arrow="false" :title-style="{'font-weight':'bold'}"	:border-bottom="false" class="u-m-t-20"></u-cell-item>
				<u-cell-item v-for="(item,index) in sellerMenus" :arrow="false" :key="item.code+index">
					<view class="" slot="title">
						<view class="" style="font-weight: 400;color: #333;">{{item.name}}</view>
						<view class="u-font-24" style="color: #999;">{{item.remarks}}</view>
					</view>
					<u-switch slot="right-icon" v-model="item.isCheck" :size="40" :active-color="themeColor"
						:inactive-color="greyColor"></u-switch>
				</u-cell-item>
			</u-cell-group>
			<!-- 品牌商权限菜单 -->
			<u-cell-group :border="false" v-if="ownerMenus.length!=0">
				<u-cell-item  :title="'品牌商权限'" :arrow="false" :title-style="{'font-weight':'bold'}"	:border-bottom="false" class="u-m-t-20"></u-cell-item>
				<u-cell-item v-for="(item,index) in ownerMenus"  :arrow="false" :key="item.code+index">
					<view class="" slot="title">
						<view class="" style="font-weight: 400;color: #333;">{{item.name}}</view>
						<view class="u-font-24" style="color: #999;">{{item.remarks}}</view>
					</view>
					<u-switch slot="right-icon" v-model="item.isCheck" :size="40" :active-color="themeColor"
						:inactive-color="greyColor"></u-switch>
				</u-cell-item>
			</u-cell-group>
		</view>
		<akLoading isFullScreen :active="loading"></akLoading>
		<set-submit-bt text="保 存" bgColor="#F8F8F8" @click="handleSubmit" />
	</view>
</template>

<script>
	import SetSubmitBt from '@/components/set-submit-bt/index.vue';
	import { useShopStore } from '@/store/shop.js';
	import { mapState } from 'pinia';
	export default {
		components: {
			SetSubmitBt
		},
		async onLoad(options) {
			// 获取权限
			this.shopId = options.shopId;
			this.form.ShopId =  options.shopId;
			this.form.id = this.positionInfo.id;
			this.form.name = this.positionInfo.name;
			await this.getMenus()
			if (this.positionInfo.id) {
				this.addOrEdit = 2
				// 设置默认勾选
				this.getDefault()
			}
			
		},
		data() {
			return {
				title: '',
				labelStyle: {
					fontSize: '32rpx',
					fontWeight: 'bold'
				},
				addOrEdit: 1,
				form: {
					ShopId: ''
				},
				shopId:'',
				checked: false,
				menus: [],
				loading:false,
			}
		},
		computed:{
			buyerMenus(){
				return this.menus.filter(item=>{
					return item.powerBy == 'Buyer'
				})
			},
			sellerMenus(){
				return this.menus.filter(item=>{
					return item.powerBy == 'Seller'
				})
			},
			ownerMenus(){
				return this.menus.filter(item=>{
					return item.powerBy == 'BrandOwner'
				})
			},
			...mapState(useShopStore, {positionInfo: 'positionInfo'})
		},
		methods: {
			async getMenus() {
				console.log(this.shopId);
				this.loading = true;
				const res = await this.$setHttp.get('api/Shop/GetMenus', {
					params: {
						shopId: this.shopId
					},
					header:{shopId:this.shopId},
				})
				this.loading = false;
				if(res.code === 200){
					this.menus = res.data;
				}else{
					uni.showToast({
						title: '获取职位菜单失败,错误信息：'+res.erroMessage,
						duration: 2000,
						icon:'error'
					});
					this.$mHelper.delayedJump();
				}
			},
			getDefault() {
				const list = this.positionInfo.positionMenus
				for (let i = 0; i < list.length; i++) {
					const index = this.menus.findIndex(item => {
						return item.code == list[i].menuCode
					})
					this.menus[index].isCheck = true
				}
			},
			async handleSubmit() {
				this.loading = true;
				if (!this.form.name) {
					this.loading = false;
					return this.$u.toast('请输入职位名称')
				}
				const arr = this.filterPower()
				if (!arr) {
					this.loading = false;
					return this.$u.toast('至少开启一个权限')
				}
				this.form.menuCodes = arr
				if (this.addOrEdit == 1) {
					delete this.form.id
					const res = await this.$setHttp.post('api/Shop/AddShopPosition', this.form,{header:{shopId:this.shopId}});
					this.loading = false;
					if(res.code === 200){
						this.$u.toast('新增职位成功', 1000, 'success');
						this.$mHelper.delayedJump();
					}else{
						uni.showToast({
							title: '新增职位失败,错误信息：'+res.erroMessage,
							duration: 2000,
							icon:'error'
						});
					}
				} else {
					console.log(this.form)
					const res = await this.$setHttp.post('api/Shop/UpdatePosition', this.form,{header:{shopId:this.shopId}});
					this.loading = false;
					if(res.code ===200){
						this.$u.toast('保存成功', 1000, 'success')
						this.$mHelper.delayedJump()
					}else{
						uni.showToast({
							title: '保存职位失败,错误信息：'+res.erroMessage,
							duration: 2000,
							icon:'error'
						});
					}
				}
				// this.$u.toast('保存成功', 1000, 'success')
				// this.$mHelper.delayedJump()
			},
			// 过滤选择的权限
			filterPower() {
				// let list = this.menus
				const arr = this.menus.filter(item => {
					return item.isCheck == true
				})
				return arr
			}
		}
	}
</script>

<style scoped>
	.header {
		background-color: #FFFFFF;
		padding: 0 70rpx;
	}
</style>
